<template>
  <div class="inbound-container">
    <el-form :inline="true" label-width="120px" :model="form">
      <el-form-item :label="form.BillStatus === '正常' ? translate('出库编码') : translate('领料编码') + '：'">
        <div class="item">{{ form.PickingCode }}</div>
      </el-form-item>
      <el-form-item :label="translate('领料单号') + '：'">
        <div class="item">{{ form.PickingNo }}</div>
      </el-form-item>
      <el-form-item :label="translate('领料单位') + '：'">
        <div class="item">{{ form.PickingUnit }}</div>
      </el-form-item>
      <el-form-item :label="translate('项目') + '：'">
        <div class="item">
          {{ form.PickingName }}
        </div>
      </el-form-item>
      <!-- <el-form-item :label="translate('发货单位') + '：'">
        <div class="item">{{ form.SendUnit }}</div>
      </el-form-item>
      <el-form-item :label="translate('发货库房') + '：'">
        <div class="item">{{ form.SendWarehouse }}</div>
      </el-form-item> -->
      <el-form-item :label="translate('物流凭证') + '：'">
        <div class="item">{{ form.ItemVoucher }}</div>
      </el-form-item>
      <el-form-item :label="translate('创建日期') + '：'">
        <div class="item">
          {{ form.CreateDate }}
        </div>
      </el-form-item>
      <el-form-item :label="translate('会计凭证') + '：'">
        <div class="item">{{ form.AccountVoucher }}</div>
      </el-form-item>
      <el-form-item :label="translate('领料人') + '：'">
        <div class="item">{{ form.PickingPerson }}</div>
      </el-form-item>
      <!-- <el-form-item :label="translate('大类号') + '：'">
        <div class="item">{{ form.LCNo }}</div>
      </el-form-item> -->
      <el-form-item :label="translate('保管员') + '：'">
        <div class="item">{{ form.Custodian }}</div>
      </el-form-item>
      <el-form-item :label="translate('备注') + '：'">
        <div>{{ form.Remark }}</div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="tableData">
      <el-table-column :label="translate('类别')" prop="ItemCate" />
      <el-table-column :label="translate('仓库单位')" prop="WHUnit" />
      <el-table-column :label="translate('存放地点')" prop="StorageLocation" />
      <el-table-column :label="translate('存放地点')" prop="StorageLocation" />
      <el-table-column :label="translate('库位')" prop="WSCode" />
      <el-table-column :label="translate('物料编码')" prop="ItemCode" />
      <el-table-column
        :label="translate('物资名称')"
        min-width="100"
        prop="ItemName"
      />
      <el-table-column :label="translate('规格')" prop="ItemSpec" />
      <el-table-column :label="translate('计量单位')" prop="ItemUnit" />
      <el-table-column :label="translate('库存数量')" prop="StockQty" />
      <el-table-column :label="translate('数量')" prop="Qty" />
      <el-table-column :label="translate('价格')" min-width="80" prop="Price" />
      <el-table-column :label="translate('金额')" prop="TotalAmount" />
      <el-table-column :label="translate('用途')" prop="Purpose" width="250">
        <template #default="{ row }">
                <div v-if="row.childList&&row.childList.length>0">
                  <div v-for="(item, index) in row.childList" :key="index" class="colored">
                    <div>
                      <span class="mr10">井号：{{item.WellNumber}}</span>
                      <span class="mr10">数量：{{item.Qty}}</span>
                      <span>备注：{{item.Remark}}</span>
                    </div>
                  </div>
                </div>
                <div v-else>{{row.Purpose}}</div>
        </template>
      </el-table-column>

      <!-- <el-table-column :label="translate('备注')" prop="Remark" /> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentchiled"
        @size-change="handleSizechiled"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { pickingbillUpdateDetail } from '@/api/form'
  import { translate } from '@/i18n'
  const props = defineProps<{
    id: string,
  }>()
  const form: any = ref({})
  const tableData: any = ref([])
  const id = props.id || ''
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const childData: any = ref([])
  const getTableData = async () => {
    const params = {
      pageNo: 1,
      pageSize: 100,
      total: 0,
      tableName: '',
      sort: '',
      order: '',
      wheres: '',
      export: true,
      value: id,
    }
    const data = await pickingbillUpdateDetail(params)
    if(data.rows && data.rows.length>0) {
      data.rows.map((item,index) =>{
        item.childList = []
        if(data.extra && data.extra.length>0){
          data.extra.map(item1 => {
            if(item.ItemCode === item1.ItemCode) {
              item.childList.push(item1)
            }
          })
        }
      })
    }
    tableData.value = data.rows || []
    form.value = data.master || {}
    childData.value = data.extra || []

  }
  const handleCurrentchiled = (val: number) => {
    pageNo.value = val
  }
  const handleSizechiled = (val: number) => {
    pageSize.value = val
  }

  onMounted(() => {
    getTableData()
  })
</script>

<style lang="scss" scoped>
  .inbound-container {
    .item {
      width: 160px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .colored {
      color: red;
    }
  }
</style>
